<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后端登录</title>

    <script src="/js/vue.js"></script>
    <script src="/js/axios.js"></script>

    <style>
        body {
            display: flex;
            justify-content: center;
            background-image: linear-gradient(to left, #c5c2c3, #343436);

            /* background-image: linear-gradient(to left, #2c2a2b, #61606e); */

        }

        .a {
            background-color: #fff;
            width: 350px;
            height: 500px;
            position: relative;
            display: flex;
            border-radius: 10px;
            justify-content: center;
            align-items: center;
            top: 100px;
        }

        .b {
            width: 300px;
            height: 450px;
            overflow: hidden;
        }

        .c {
            font: 900 40px '';
            margin: 60px 0;
            text-align: center;
            /* 设置字体间距 */
            letter-spacing: 5px;
        }

        .e {
            width: 100%;
            margin-bottom: 20px;
            outline: none;
            border: 0;
            padding: 10px;
            border-bottom: 2px solid rgb(60, 60, 70);
            font: 900 16px '';
        }

        .f {
            text-align: center;
            height: 24px;
            padding: 12px;
            font: 900 20px '';
            border-radius: 10px;
            background-image: linear-gradient(to left, #d6d3d4, #38383a);
        }

        .g {
            margin: 33px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="a">
            <div class="b">
                <p class="c">Login</p>
                <div class="d">
                    <input type="text" class="e" v-model="logfrom.name" @change="checkphone" placeholder="账号">
                    <span style="color: red;">{{msgname}}</span>
                    <input type="password" class="e" v-model="logfrom.password" @change="checkpassword"
                        placeholder="密码" @keyup.enter="adminlogin">
                    <span style="color: red;">{{msgpassword}}</span>
                    <div class="f" @click="adminlogin">GO</div>
                </div>
                <div class="g">晚风后台控制面板<a href="#"></a></div>
            </div>
        </div>
    </div>

</body>


<script>
    var app = new Vue({
        el: "#app",
        data: {
            logfrom: [], //表单账号密码
            msgname: '',
            msgpassword: ''
        },
        methods: {
            adminlogin() {
                let that = this;
                if (this.msgname != "") {

                    setTimeout("alert('不要点了')")
                    return;
                } else if (this.msgpassword != "") {
                    alert("不要点了")
                    return;
                }
                axios.post(
                        `http://localhost:8999/MessageBoard_war/AdminLogin?name=${this.logfrom.name}&password=${this.logfrom.password}`
                    )
                    .then(function (response) {
                        if (response.data.code == 200) {
                            localStorage.setItem('token', response.headers.token)
                            if (response.headers.token == null) {
                                alert("人还是不要太好奇，看看你数据库连接没？")
                                return;
                            } else {
                                location.replace("../Admin/AdminIndex.html");
                            }

                        } else {
                            alert(response.data.data);
                            return;
                        }
                    })
                localStorage.setItem('name', this.logfrom.name);
            },



            //    登录表单验证
            checkphone() {
                if (this.logfrom.name == "") {
                    this.msgname = "*不可以为空"
                } else {
                    this.msgname = "";
                }
            },
            checkpassword() {
                var patrn = /[`~!@#$%^&*()_\-+=<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——\-+={}|《》？：“”【】、；‘'，。、]/;
                if (this.logfrom.password == "") {
                    this.msgpassword = "*密码不能为空"
                } else if (this.logfrom.password.length < 6 || patrn.test(this.logfrom.password)) {
                    this.msgpassword = "*密码不合法";
                } else {
                    this.msgpassword = "";
                }
            }
        }
    })
</script>

</html>